<template>
  <view class="person-page">
    <view class="bgImg"></view>
    <view class="person-top">
      <view class="top-icon">
        <u-icon name="arrow-left" @click="onBack"></u-icon>
      </view>
      <!-- <view class="top-name">叮叮老师</view> -->
    </view>
    <view class="person-info">
      <view class="info-top">
        <image src="../../static/img/userPage/userPage.png" mode=""></image>
        <view class="top-data">
          <view class="top-list">
            <view>方案数</view>
            <view>111</view>
          </view>
          <view class="top-list">
            <view>最高连红</view>
            <view>111</view>
          </view>
          <view class="top-list">
            <view>粉丝数</view>
            <view>111</view>
          </view>
        </view>
      </view>
      <view class="info-name">
        <view class="name-row">叮叮老师</view>
        <view class="name-btn">
          <u-button text="关注" icon="plus" iconColor="#fff" size="mini"
            color="linear-gradient(to left, #2F7EFC 0%, #5CBEFF 100%)"></u-button>
        </view>
      </view>
      <view class="info-speciality">
        <view>擅长：</view>
        <view>竞足丨北单</view>
      </view>
      <view class="info-label">
        著名分析师，供职于xxx，善于从基本面出发，
        经验丰富。（个人简介文案）
      </view>
    </view>
    <view class="person-main">
      <view class="person-tab">
        <u-tabs :list="list1" @click="click" :activeStyle="{color: '#2F7EFC'}"></u-tabs>
      </view>
      <view class="person-number">
        <view class="number-main">
          <view class="main-top">
            <view class="top-list" v-for="item,index in userNumberList" :key="index">
              <view class="main-left">{{item.title}}</view>
              <view class="main-content">
                <view class="content-main" v-for="ite,ind in item.number" :key="ind"></view>
              </view>
              <view class="main-right">{{item.number}}</view>
            </view>
          </view>
          <view class="top-record">
            <view class="recore-left">近期战绩</view>
            <view class="recore-centent">
              <u-radio-group>
                <view class="centent-main">
                  <u-radio activeColor="#FF5353" :name="true"></u-radio>
                </view>
                <view class="centent-empty"></view>
              </u-radio-group>
            </view>
          </view>
        </view>
        <view class="number-programme">
          <view class="programme-title">在售方案</view>
          <view class="programme-list">
            <view class="selling-nav" v-for="item,index in 5" :key="index">
              <view class="selling-review">
                <view class="review-text">主推信心：</view>
                <image src="@/static/icon/collectPage/star.png" mode="" v-for="item,index in 5" :key="index">
                </image>
              </view>
              <view class="review-nav">
                【情报】【亚洲杯小组赛首轮】成功9连红，昨日亚洲杯3中
                2！今晚继续关注亚洲杯小组赛，解析韩国VS巴林的亚洲成功9连红，昨日亚洲杯3中
                2！今晚继续关注亚洲杯小组赛，解析韩国VS巴林的亚洲…
              </view>
              <view class="review-competition">
                <view class="competition-nav">
                  <view class="competition-label">让球</view>
                  <view class="competition-title">今天19:30 亚洲杯丨韩国VS巴林</view>
                </view>
              </view>
              <view class="review-price">
                <view class="price-time">3小时前发布</view>
                <view class="price-num">188金币</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list1: [{
          name: '足球',
        }, {
          name: '篮球',
        }],
        userNumberList: [{
          title: '近期连红数',
          number: 3
        }, {
          title: '最高连红',
          number: 15
        }, {
          title: '近15场命中',
          number: 20
        }]
      }
    },
    methods: {
      onBack() {
        uni.navigateBack(-1)
      }
    }
  }
</script>

<style lang="less" scoped>
  .person-page {
    padding-top: var(--status-bar-height);
    position: relative;

    .person-top {
      background: url(/static/img/collectPage/collect.png) no-repeat;
      background-size: cover;
      position: sticky;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 116rpx;
      width: 100%;
      z-index: 2;

      .top-icon {
        position: absolute;
        left: 40rpx;
        top: 40rpx;
      }

      .top-name {
        font-size: 48rpx;
        font-weight: 500;
        color: #3B3B3B;
      }
    }

    .person-info {
      width: 750rpx;
      background: rgba(255, 255, 255);
      border-radius: 20rpx 20rpx 0rpx 0rpx;
      margin-top: 44rpx;
      position: sticky;
      z-index: 1;
      box-sizing: border-box;
      padding: 0 40rpx 40rpx;

      .info-top {
        height: 132rpx;
        width: 100%;
        display: flex;
        align-items: center;
        position: relative;

        image {
          position: absolute;
          width: 138rpx;
          height: 138rpx;
          border-radius: 50%;
          top: -26rpx;
          left: 0;
        }

        .top-data {
          flex: 1;
          display: flex;
          align-items: center;
          margin-left: 178rpx;

          .top-list {
            width: 33.33%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            :first-child {
              height: 40rpx;
              font-size: 28rpx;
              font-family: PingFang SC;
              font-weight: 400;
              line-height: 40rpx;
              color: #909090;
            }

            :last-child {
              height: 40rpx;
              font-size: 28rpx;
              font-family: PingFang SC;
              font-weight: 500;
              line-height: 40rpx;
              color: #FF5353;
            }
          }
        }
      }

      .info-name {
        display: flex;
        margin-top: 20rpx;
        align-items: center;
        justify-content: space-between;

        .name-row {
          font-size: 48rpx;
          font-weight: 500;
          color: #3B3B3B;
        }

        .name-btn {
          width: 126rpx;
          height: 54rpx;
        }
      }

      .info-speciality {
        display: flex;
        align-items: center;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 400;

        :first-child {
          color: #909090;
        }

        :last-child {
          color: #C9A542;
        }
      }

      .info-label {
        margin-top: 28rpx;
        font-size: 32rpx;
        font-weight: 400;
        color: #909090;
      }
    }

    .person-main {
      padding-top: 20rpx;
      box-sizing: border-box;
      background: rgba(249, 249, 249);
      position: sticky;
      z-index: 1;

      .person-tab {
        width: 750rpx;
        height: 82rpx;
        background: rgba(255, 255, 255);


        /deep/ .uni-scroll-view-content {
          display: flex;
          justify-content: center;
        }
      }

      .person-number {
        width: 750rpx;
        height: 968rpx;
        background: rgba(255, 255, 255);
        overflow-y: scroll;
        margin-top: 4rpx;
        padding: 0 30rpx;
        box-sizing: border-box;

        .number-main {
          width: 100%;

          .main-top {
            margin-top: 40rpx;

            .top-list {
              height: 72rpx;
              width: 100%;
              display: flex;
              align-items: center;

              .main-left {
                width: 150rpx;
                font-size: 28rpx;
                font-weight: 400;
                color: #909090;
              }

              .main-content {
                flex: 1;
                overflow-x: scroll;
                display: flex;
                white-space: nowrap;

                .content-main {
                  flex-shrink: 0;
                  width: 27rpx;
                  height: 35rpx;
                  background: rgba(255, 83, 83);
                  position: relative;
                  margin-left: 10rpx;
                }

                :after {
                  content: '';
                  display: block;
                  border-left: 8rpx solid transparent;
                  border-right: 8rpx solid transparent;
                  border-top: 36rpx solid #fff;
                  position: absolute;
                  top: 0;
                  left: -8rpx;
                }

                :before {
                  content: '';
                  display: block;
                  border-left: 8rpx solid transparent;
                  border-right: 8rpx solid transparent;
                  border-bottom: 36rpx solid #fff;
                  position: absolute;
                  bottom: -2rpx;
                  right: -8rpx;
                }
              }

              .main-right {
                margin-left: 40rpx;
                font-size: 36rpx;
                font-weight: 600;
                color: #313131;
              }
            }
          }

          .top-record {
            height: 72rpx;
            width: 100%;
            display: flex;
            align-items: center;

            .recore-left {
              width: 150rpx;
              font-size: 28rpx;
              font-weight: 400;
              color: #909090;
            }

            .recore-centent {
              flex: 1;
              overflow-x: scroll;
              display: flex;
              white-space: nowrap;

              .centent-main {
                flex-shrink: 0;
                width: 36rpx;
                height: 36rpx;
                margin-left: 10rpx;
              }

              .centent-empty {
                flex-shrink: 0;
                width: 36rpx;
                height: 36rpx;
                border-radius: 50%;
                background-color: #909090;
                margin-left: 10rpx;
              }
            }
          }
        }

        .number-programme {
          margin-top: 30rpx;

          .programme-title {
            font-size: 32rpx;
            font-weight: 500;
            line-height: 44rpx;
            color: #3B3B3B;
          }

          .programme-list {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;

            .selling-nav {
              width: 670rpx;
              background: rgba(255,255,255);
              border: 2px solid #F0F0F0;
              border-radius: 10rpx;
              margin-top: 20rpx;
              .selling-review {
                width: 670rpx;
                height: 36rpx;
                background: linear-gradient(88deg, #FFEBA7 0%, rgba(255, 239, 195, 0.49) 55%, rgba(255, 240, 208, 0.37) 100%);
                box-sizing: border-box;
                padding: 0 20rpx;
                display: flex;
                align-items: center;
                margin-top: 14rpx;
                .review-text {
                  font-size: 20rpx;
                  font-weight: 400;
                  color: #C48E44;
                }

                image {
                  height: 22rpx;
                  width: 22rpx;
                }
              }

              .review-nav {
                height: 68rpx;
                box-sizing: border-box;
                padding: 0 12rpx;
                margin-top: 16rpx;
                font-size: 24rpx;
                font-weight: 500;
                line-height: 34rpx;
                color: #313131;
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }

              .review-competition {
                height: 58rpx;
                box-sizing: border-box;
                padding: 0 10rpx;
                margin-top: 16rpx;

                .competition-nav {
                  width: 100%;
                  height: 100%;
                  background: rgba(245, 245, 245);
                  border-radius: 10rpx;
                  display: flex;
                  align-items: center;
                  box-sizing: border-box;
                  padding: 0 10rpx;

                  .competition-label {
                    width: 90rpx;
                    height: 32rpx;
                    background: rgba(255, 255, 255, 0.39);
                    border: 2px solid #FF5353;
                    border-radius: 16rpx;
                    font-size: 20rpx;
                    font-weight: bold;
                    line-height: 32rpx;
                    color: #FF5353;
                    text-align: center;
                  }

                  .competition-title {
                    width: 100%;
                    font-size: 24rpx;
                    font-weight: 500;
                    color: #909090;
                    margin-left: 12rpx;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }
                }
              }

              .review-price {
                margin-top: 12rpx;
                padding: 0 10rpx 10rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .price-time {
                  font-size: 24rpx;
                  font-weight: 400;
                  color: #909090;
                }

                .price-num {
                  font-size: 24rpx;
                  font-weight: 500;
                  color: #FF5353;
                }
              }
            }
          }
        }
      }
    }
  }

  .bgImg {
    background: url(/static/img/collectPage/collect.png) no-repeat;
    position: absolute;
    background-size: cover;
    top: 0;
    left: 0;
    width: 100%;
    height: 750rpx;
  }
</style>